<template>
  <div>
    <el-card>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">学员ID:</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.uid"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">姓名 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.name"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">姓拼音 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.last_py"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">名拼音 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.first_py"
                    @input="inputSearch"></el-input>
        </div>
      </div>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">出生日期 :</span>
          <el-date-picker
                  size="small"
                  class="inputWidth"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  v-model="query.birthday"
                  @change="search"
          ></el-date-picker>
        </div>
        <div class="searchParams"><span class="spanWidth">证件类型 :</span>
          <el-select
                  size="small"
                  class="inputWidth"
                  v-model="query.card_type"
                  placeholder="请选择证件类型"
                  @change="search"
                  clearable
          >
            <el-option
                    v-for="item in cardOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">证件号码 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.card_id"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">电子邮箱 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.email"
                    @input="inputSearch"></el-input>
        </div>
      </div>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">手机号码 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.phone"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">毕业年份 :</span>
          <el-date-picker
                  size="small"
                  type="month"
                  class="inputWidth"
                  @change="search"
                  format="yyyy 年 MM 月"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  v-model="query.grad_time"

          ></el-date-picker>
        </div>
        <div class="searchParams"><span class="spanWidth">最高学历 :</span>
          <el-select
                  size="small"
                  v-model="query.hig_edu"
                  placeholder="最高学历"
                  @change="search"
                  class="inputWidth"
                  clearable
          >
            <el-option label="研究生及以上" value="研究生及以上"></el-option>
            <el-option label="本科" value="本科"></el-option>
            <el-option label="专科" value="专科"></el-option>
            <el-option label="其他" value="其他"></el-option>
            <el-option label="研究生及以上（在读）" value="研究生及以上（在读）"></el-option>
            <el-option label="本科（在读）" value="本科（在读）"></el-option>
            <el-option label="专科（在读）" value="专科（在读）"></el-option>
            <el-option label="其他（在读）" value="其他（在读）"></el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">相关专业 :</span>
          <el-select
                  size="small"
                  v-model="query.major"
                  placeholder="相关专业"
                  @change="search"
                  clearable
                  class="inputWidth"
          >
            <el-option label="人力资源管理" value="人力资源管理"></el-option>
            <el-option label="工商管理" value="工商管理"></el-option>
            <el-option label="行政管理" value="行政管理"></el-option>
            <el-option label="会计" value="会计"></el-option>
            <el-option label="财政、税务" value="财政、税务"></el-option>
            <el-option label="财政管理" value="财政管理"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </div>

      </div>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">工作区域(省) :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.province"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">工作区域(市) :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.city"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">工作区域(区) :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.region"
                    @input="inputSearch"></el-input>
        </div>
      </div>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">单位类型 :</span>
          <el-select
                  style="width: 320px; margin-right: 20px"
                  size="small"
                  v-model="query.com_type"
                  placeholder="请选择单位类型"
                  @change="search"
                  clearable
          >
            <el-option
                    v-for="item in com_typeList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">行业类型 :</span>
          <el-select
                  size="small"
                  v-model="query.ind_type"
                  placeholder="请选择行业类型"
                  @change="search"
                  clearable
          >
            <el-option
                    v-for="item in ind_typeList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">单位名称 :</span>
          <el-input size="small" style="width: 300px" clearable v-model="query.com_name"
                    @input="inputSearch"></el-input>
        </div>
      </div>
      <div class="searchRow">
        <div class="searchParams"><span>从事薪酬管理（含薪税服务）工作年限（含实习经历） :</span>
          <el-col :span="8">
            <el-input
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                    size="small"
                    type="number"
                    v-model="query.work_age"
                    @input="inputSearch"
                    clearable
            ></el-input>
          </el-col>
        </div>
      </div>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">职务 :</span>
          <el-select
                  style="width: 420px"
                  size="small"
                  v-model="query.work_duty"
                  placeholder="请选择职务"
                  @change="search"
                  clearable
          >
            <el-option
                    v-for="item in work_dutyList"
                    :key="item.value"
                    :label="item.value.split('#')[0]"
                    :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="searchParams"><span style="width: 120px">相关资质或证书 :</span>
          <el-select
                  size="small"
                  style="width: 380px;"
                  v-model="query.cert"
                  placeholder="请选择"
                  @change="search"
                  clearable
          >
            <el-option
                    v-for="item in certDisplayOptions"
                    :key="item.id"
                    :label="item.value"
                    :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="searchRow" v-show="$store.state.user_type == 3">
        <div class="searchParams"><span class="spanWidth">报名机构 :</span>
          <el-select
                  size="small"
                  v-model="query.org"
                  placeholder="请选择单位类型"
                  @change="search"
                  clearable
          >
            <el-option
                    v-for="item in orgList"
                    :key="item.id"
                    :label="item.org_name"
                    :value="item.org_code"
            ></el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">报考机构 :</span>
          <el-select
                  size="small"
                  v-model="query.exam_org"
                  placeholder="请选择单位类型"
                  @change="search"
                  clearable
          >
            <el-option
                    v-for="item in orgList"
                    :key="item.id"
                    :label="item.org_name"
                    :value="item.org_code"
            ></el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">补考次数:</span>
          <el-col :span="8">
            <el-input
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                    size="small"
                    type="number"
                    v-model="query.exam_count"
                    @change="search"
            ></el-input>
          </el-col>
        </div>
      </div>
      <div class="searchRow">


        <!--        <div class="searchParams"><span>合同签署 :</span>-->
        <!--          -->
        <!--        </div>-->
      </div>
      <div class="searchRow">

        <div class="searchParams"><span class="spanWidth">准考证号 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.exam_code"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">确认书编号 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.contract_id"
                    @input="inputSearch"></el-input>
        </div>
      </div>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">科目名称 :</span>
          <el-select size="small" class="inputWidth" clearable v-model="query.course" placeholder="请选择"
                     @change="search">
            <el-option
                    v-for="item in course"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">考试城市 :</span>
          <el-select size="small" class="inputWidth" clearable v-model="query.exam_city" placeholder="请选择"
                     @change="search">
            <el-option
                    v-for="item in examCityOptions"
                    :key="item.id"
                    :label="item.exam_city"
                    :value="item.exam_city">
            </el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">考试时间 :</span>
          <el-select size="small" class="inputWidth" clearable v-model="query.exam_date" placeholder="请选择"
                     @change="search">
            <el-option
                    v-for="item in examDateOptions"
                    :key="item.id"
                    :label="item.exam_date"
                    :value="item.exam_date">
            </el-option>
          </el-select>
        </div>
      </div>
      <el-row class="searchRow">

        <div class="block" style="margin-left: 40px">
          <span style="font-size: 14px;margin-right: 10px;">考试日期 :</span>
          <el-date-picker
                  v-model="query.exam_date_range"
                  @change="search"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  size="small"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <div class="block" style="margin-left: 40px">
          <span style="font-size: 14px;margin-right: 10px">激活日期 :</span>
          <el-date-picker
                  v-model="query.active_date_range"
                  @change="search"
                  type="datetimerange"
                  size="small"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right">
          </el-date-picker>
        </div>
      </el-row>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">审核进度 :</span>
          <el-cascader
                  class="inputWidth"
                  size="small"
                  @change="stateChange"
                  v-model="state"
                  :options="stateOptions"
                  clearable></el-cascader>
          <!--                                                                        {{stateStr}}-->
        </div>
        <div class="searchParams"><span class="spanWidth">审核日期 :</span>
          <el-cascader
                  size="small"
                  @change="stateTimeChange"
                  v-model="state"
                  :options="stateTimeOptions"
                  clearable></el-cascader>
<!--          <el-date-picker-->
<!--                  size="small"-->
<!--                  class="inputWidth"-->
<!--                  format="yyyy 年 MM 月 dd 日"-->
<!--                  value-format="yyyy-MM-dd"-->
<!--                  placeholder="选择日期"-->
<!--                  v-model="query.audit_date"-->
<!--                  @change="search"-->
<!--          ></el-date-picker>-->
        </div>
        <div class="searchParams"><span class="spanWidth">备注 :</span>
          <el-input size="small" style="width: 300px" clearable v-model="query.note"
                    @input="inputSearch"></el-input>
        </div>
      </div>

      <el-row class="searchRow">
        <el-col>
          <!--                    <el-button type="primary" size="mini" icon="el-icon-search" @click="search">搜索</el-button>-->
          <!--                    <el-button type="primary" size="mini" @click="downDataVisible = true">导出<i-->
          <!--                            class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
          <el-button type="primary" size="mini" @click="downDataVisible = true">导出<i
                  class="el-icon-upload el-icon--right"></i></el-button>
          <el-button size="mini" icon="el-icon-delete" @click="reset">重置</el-button>
        </el-col>
        <el-dialog
                title="导出数据"
                width="50%"
                :visible.sync="downDataVisible"
        >
          <div style="margin: 15px 0;"></div>
          <div class="checkboxDiv" style="text-align: left">
            <el-checkbox :indeterminate="isIndeterminate" style="margin-right: 20px" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox v-if="$store.state.user_type == 3" @change="handleCheckAppAllChange">App选中</el-checkbox>
            <div style="margin: 10px 0;display: flex;flex-wrap: wrap;justify-content: space-between"></div>
            <el-checkbox-group style="line-height: 20px" v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox style="width: 150px;text-align: left" v-for="item in cities" :label="item" :key="item">{{cityOptionsText[item]}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div style="margin-top: 40px">
            <el-button @click="downDataVisible = false">取消</el-button>
            <el-button type="primary" :disabled="checkedCities.length > 0 ? false:true" @click="downData">确认
            </el-button>
          </div>
        </el-dialog>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import {formatDate} from "../../utils/formatDate";

  const cityOptions = [
    'user',
    'card_type_display',
    'gender_display',
    'course',
    'org',
    'exam_org',
    'name',
    'birthday',
    'card_id',
    'phone',
    'email',
    'province',
    'city',
    'address',
    'com_name',
    'grad_time',
    'hig_edu',
    'work_age',
    'work_duty',
    'active_date',
    'exp_date',
    'exam_date',
    'train_account',
    'train_password',
    'exam_code',
    'note'
  ];
  const appOptions = [
    'org',
    'user',
    'name',
    'gender_display',
    'province',
    'city',
    'region',
    'train_account',
    'train_password',
    'course',
    'active_date',
    'exp_date',
    'note'
  ];
  import {examDate, org_list} from "../../request/api";
  import {cert_list, com_typeList, ind_typeList, work_duty_list} from "@/assets/staticList";
  let children = [
    {
      value: formatDate(new Date(new Date().getTime() - 24*60*60*1000), 'yyyy-MM-dd'),
      label: '昨天',
    },
    {
      value: formatDate(new Date(), 'yyyy-MM-dd'),
      label: '今天',
    },
    {
      value: formatDate(new Date(new Date().getTime() + 24*60*60*1000), 'yyyy-MM-dd'),
      label: '明天',
    }
  ];
  export default {
    name: "Search",
    props: {
      course: {
        type: Array
      },
      examTime: {
        type: Array
      }
    },
    data() {
      return {
        stateTimeOptions:[
          {
            value: 'org',
            label: '机构一审',
            children: [{
              value: 'org_reject_1',
              label: '驳回',
              children:children
            }, {
              value: 'org_pass_1',
              label: '通过',
              children:children
            }]
          },
          {
            value: 'org',
            label: '机构二审',
            children: [{
              value: 'org_reject_2',
              label: '驳回',
              children:children
            }, {
              value: 'org_pass_2',
              label: '通过',
              children:children
            }]
          },
          {
            value: 'admin',
            label: '总部一审',
            children: [{
              value: 'admin_reject_1',
              label: '驳回',
              children:children
            }, {
              value: 'admin_pass_1',
              label: '通过',
              children:children
            }]
          },
          {
            value: 'admin',
            label: '总部二审',
            children: [{
              value: 'org_reject_2',
              label: '驳回',
              children:children
            }, {
              value: 'admin_pass_2',
              label: '待审',
              children:children
            }]
          }
        ],
        cityOptionsText:{
          'card_type_display':'证件类型',
          'user':'用户名',
          'gender_display':'性别',
          'course':'科目',
          'org':'培训机构',
          'exam_org':'报考机构',
          'name':'姓名',
          'birthday':'出生日期',
          'card_id':'证件类型',
          'phone':'手机号码',
          'email':'邮箱',
          'province':'省份',
          'city':'城市',
          'address':'现居住址',
          'com_name':'单位名称',
          'grad_time':'毕业时间',
          'hig_edu':'最高学历',
          'work_age':'从业年限',
          'work_duty':'职务',
          'active_date':'激活时间',
          'exp_date':'到期时间',
          'exam_date':'考试时间',
          'train_account':'学习账户',
          'train_password':'学习密码',
          'exam_code':'准考证号',
          'add_time':'添加时间',
          'note':'备注'
        },
        checkAll: false,
        checkedCities: [],
        cities: cityOptions,
        isIndeterminate: true,
        orgList: [],
        certDisplayOptions: cert_list,
        work_dutyList: work_duty_list,
        ind_typeList: ind_typeList,
        cardOptions: [
          {id: 1, name: "居民身份证"},
          {id: 2, name: "护照"},
          {id: 3, name: "港澳台胞身份证"},
        ],
        com_typeList: com_typeList,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        arrParams: [],
        downOptions: [],
        downDataVisible: false,
        queryCopy: null,
        state: null,
        watchState: null,
        stateOptions: [
          {
            value: '<3',
            label: '机构一审',
            children: [
              {
                value: '<3',
                label: "待审"
              },
              {
                value: '>2',
                label: "已审"
              },
              // {
              //     value: '<3',
              //     label: "拒审"
              // }
            ]
          },
          {
            value: '3<n<7',
            label: '机构二审',
            children: [
              {
                value: '3<n<7',
                label: "待审"
              },
              {
                value: '>6',
                label: "已审"
              },
              // {
              //     value: '3<n<7',
              //     label: "拒审"
              // }
            ]
          },
          {
            value: '=3',
            label: '总部一审',
            children: [
              {
                value: '=3',
                label: "待审"
              },
              {
                value: '>3',
                label: "已审"
              },
              // {
              //     value: '=3',
              //     label: "拒审"
              // }
            ]
          },
          {
            value: '=7',
            label: '总部二审',
            children: [
              {
                value: '=7',
                label: "待审"
              },
              {
                value: '=8',
                label: "已审"
              },
              // {
              //     value: '=7',
              //     label: "拒审"
              // }
            ]
          }
        ],
        examCityOptions: [],
        examDateOptions: [],
        query: {
          phone: '',
          name: '',
          exam_city: '',
          exam_date: '',
          course: '',
          exam_date_range: null,
          active_date_range: null,
          last_py: '',
          first_py: '',
          uid: '',
          email: '',
          card_id: '',
          birthday: null,
          card_type: '',
          grad_time: null,
          hig_edu: '',
          major: '',
          province: '',
          city: '',
          region: '',
          org: '',
          exam_org: '',
          com_type: '',
          ind_type: '',
          com_name: '',
          work_duty: '',
          cert: '',
          work_age: 0,
          exam_count: 0,
          contract_id: '',
          exam_code: '',
          note: '',
          audit_date: null,
          audit_method:null
        }
      }
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckAppAllChange(val) {
        this.checkedCities = val ? appOptions : [];
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      //获取机构列表
      getOrgList() {
        if (this.$store.state.user_type == 3) {
          org_list().then(res => {
            this.orgList = [...res]
          })
        }
      },
      inputSearch() {
        clearTimeout(inputTimeout);
        let inputTimeout = setTimeout(() => {
          this.search()
        }, 500)
      },
      getExamDate() {
        examDate(this.query.course).then(res => {
          let examCityOption = res.filter((item, index) => {
            return res.findIndex(item1 => item1.exam_city == item.exam_city) == index
          })
          let examDateOption = res.filter((item, index) => {
            return res.findIndex(item1 => item1.exam_date == item.exam_date) == index
          })
          this.examDateOptions = examDateOption
          this.examCityOptions = examCityOption
        })
      },
      downData() {
        console.log(this.arrParams,this.checkedCities)
        this.$emit('downData', this.arrParams,this.checkedCities)
      },
      stateChange() {

      },
      stateTimeChange(value){
        this.query.audit_method = value[1];
        this.query.audit_date = value[2];
        this.search();
      },
      search() {
        // console.log('this.query',this.query)
        // console.log('this.queryCopy',this.queryCopy)
        this.arrParams = [];
        for (let item in this.query) {
          if (this.queryCopy[item] != this.query[item]) {
            let obj = {};
            obj[item] = this.query[item];
            this.arrParams.push(obj);
            console.log('arrParams', JSON.parse(JSON.stringify(this.arrParams)))
          }
        }
        ;

        console.log('arrParams', this.arrParams)
        this.$emit('searchParams', this.arrParams);
      },
      reset() {
        this.state = null;
        this.query = {};
        this.$emit('reset');
      }
    },
    watch: {
      state() {
        // this.watchState = this.state[length];
        // console.log('this.watchState',this.watchState)
        // console.log('this.stateStr',this.stateStr);
        if (this.state != null) {
          let arr = [];
          for (let item of this.state) {
            arr.push(item)
          }
          this.watchState = arr[length];
        }
      },
      stateStr() {
        console.log('this.stateStr', this.stateStr)
        // this.query = JSON.parse(JSON.stringify(this.queryCopy));
        console.log('this.query 第一次', this.query);
        for (let item in this.query) {
          if (item.includes('state')) {
            delete this.query[item]
          }
        }
        let state = JSON.parse(this.stateStr);
        if (Array.isArray(state)) {
          for (let item of state) {
            for (let key in item) {
              this.query[key] = item[key]
            }
          }
        } else {
          for (let key in state) {
            this.query[key] = state[key]
          }
        }
        this.search();
      }
    },
    computed: {
      stateStr() {
        switch (this.watchState) {
          case '<3':
            return '{"state_lt":"3"}';
          case '>2':
            return '{"state_gt":"2"}';
          case '3<n<7':
            return '[{"state_gt":"3"},{"state_lt":"7"}]';
          case '>6':
            return '{"state_gt":"6"}';
          case '=3':
            return '{"state":"3"}';
          case '>3':
            return '{"state_gt":"3"}';
          case '=7':
            return '{"state":"7"}';
          case '=8':
            return '{"state":"8"}';
        }
        return null;
      }
    },
    created() {
      console.log('用户类型', this.$store.state.user_type)
      this.queryCopy = JSON.parse(JSON.stringify(this.query));
      this.getExamDate();
      this.getOrgList();
    }
  }
</script>

<style scoped>
  .checkboxDiv .el-checkbox {
    margin-right: unset;
  }

  .box-child {
    width: 130px;
  }

  .searchParams {
    display: flex;
    align-items: center;
    text-align: right;
    font-size: 14px;
  }

  .searchParams span {
    margin-right: 10px;
  }

  .inputWidth {
    width: 200px;
  }

  .spanWidth {
    width: 100px;
  }

  .searchRow {
    display: flex;
    margin-bottom: 10px;
  }
</style>
